<html>
  <head>
    <title>LeptonX Lite  主题</title>
  </head>
  <body>
    <script>
        //  LeptonX Lite 主题

              /*
                  LeptonX Lite具有ABP Razor Pages的实现。它是LeptonX主题的简化版本。


              */

              /*
                  一、安装

                          当您使用启动模板创建新解决方案时，此主题已安装。
                          
                          如果您使用任何其他模板，您可以按照以下步骤安装此主题：

                                1、将 "Volo. Abp.AspNetCore.Mvc.UI.Thame.LeptonXLite" 包添加到您的Web应用程序。

                                          "dotnet add package Volo.Abp.AspNetCore.Mvc.UI.Theme.LeptonXLite --prerelease"

                                2、从项目中删除 "Volo. Abp.AspNetCore.Mvc.UI.theme.Basic" 引用，因为切换到LeptonX Lite后不需要它


                                3、确保删除旧主题模块的依赖，并在模块类中添加LeptonXLite模块的依赖。

                                          [DependsOn(
                                              // 移除basic主题的模块依赖
                                              typeof(AbpAspNetCoreMvcUiBasicThemeModule),
                                              
                                              // 添加LeptonX Lite主题的模块依赖
                                              typeof(AbpAspNetCoreMvcUiLeptonXLiteThemeModule),
                                          )]

                                4、在AbpBundlingOptions中将BasicThemeBundles替换为LeptonXLiteThemeBundles：

                                          Configure<AbpBundlingOptions>(options =>
                                          {
                                              options.StyleBundles.Configure(
                                                  // Remove the following line
                                          -       BasicThemeBundles.Styles.Global,
                                                  // Add the following line instead
                                          +       LeptonXLiteThemeBundles.Styles.Global,
                                                  bundle =>
                                                  {
                                                      bundle.AddFiles("/global-styles.css");
                                                  }
                                              );
                                          });
              */

              /*
                  二、主题自定义    

                                1、布局  Layouts

                                          LeptonX Lite MVC为基于用户交互界面的ABP主题提供了布局。您可以使用布局来组织您的用户交互界面。

                                          主题的主要职责是提供布局。有三个预定义的布局必须由所有主题实现：

                                                  (1)、Application: 默认布局，由主应用程序页面使用

                                                  (2)、Account:     主要由帐户模块用于登录、注册、忘记密码…页面。

                                                  (3)、Empty： 根本没有布局组件的最小布局。

                                          ★、布局名称是在MVC Web项目根目录中的 "LeptonXLiteTheme" 类中定义的常量。

                                          ( 
                                            ★、布局页面时在 Themes/LeptonXLite/Layouts 文件夹下定义，

                                                你可以通过在"同一文件夹"下创建具有 "相同名称的文件"来覆盖布局！！！！！
                                          )



                                2、工具栏  Toolbars

                                          LeptonX Lite包括用于桌面和移动设备的单独工具栏。

                                          您可以独立管理工具栏。

                                          工具栏名称可以在 " LeptonXLiteToolbar " 类中访问。

                                              ①、LeptonXLiteToolbar.Main

                                              ②、LeptonXLiteToolbar.MainMobile

                                              // 工具栏贡献程序
                                              public class MyProjectNameMainToolbarContributor : IToolbarContributor
                                              {
                                                  public async Task ConfigureToolbarAsync(IToolbarConfigurationContext context)
                                                  {
                                                      // 判断工具栏类型
                                                      if (context.Toolbar.Name == LeptonXLiteToolbars.Main)
                                                      {
                                                          // 将组件添加到工具栏
                                                          context.Toolbar.Items.Add(new ToolbarItem(typeof(MyDesktopComponent)));
                                                      }

                                                      if (context.Toolbar.Name == LeptonXLiteToolbars.MainMobile)
                                                      {
                                                          // 将组件添加到工具栏
                                                          context.Toolbar.Items.Add(new ToolbarItem(typeof(MyMobileComponent)));
                                                      }
                                                  }
                                              }
              */

              /*
                    三、LeptonX Lite 主题中的 视图组件（Razor Components）

                                      ABP帮助你制作高度可定制的UI。

                                      你可以轻松地自定义你的主题依满足你的需求。

                                      ★、覆盖视图组件的原理！！

                                              虚拟文件系统可以管理物理上不存在与文件系统上的文件。它主要将(js、css、image)文件嵌入到程序集中，并在运行时像物理文件一样使用它们。

                                              应用程序(或另一个模块)可以"覆盖模块中的虚拟文件"，就像将具有相同名称和扩展名的文件被放入了"虚拟文件系统"的相同文件夹一样。（这就是覆盖主题视图组件的原理！！）


                                      LeptonX Lite建立在ABP之上，因此您可以通过遵循Abp Mvc UI自定义轻松自定义您的Asp.NetCore MVC用户交互界面。


                                1、品牌组件  Brand Componnet

                                            品牌组件是一个简单的组件，可用于展示您的品牌。它包含一个徽标和一个公司名称。

                                            (1)、如何在LeptonX Lite MVC中覆盖品牌组件？

                                                        ①、覆盖品牌组件的"视图"：

                                                                    品牌组件页面的视图部分 （. cshtml文件）在 "Themes/LeptonXLite/Components/Brand/Default.cshtml" 文件中定义，

                                                                    你可以通过创建具有 "相同名称和相同路径"的文件来覆盖它。

                                                        ②、覆盖品牌组件的"组件类"：

                                                                    品牌组件类（C#文件）在 "Themes/LeptonXLite/Components/Brand/MainNavbarBrandViewComponent.cs" 文件中定义，

                                                                    你可以通过创建具有"相同名称"和 "相同文件夹下"的文件来覆盖它。


                                  2、如何覆盖LeptonX Lite MVC中的收藏夹图标？

                                                                    您可以将新的收藏夹图标添加到~/wwwroot/favicon.svg和~/wwwroot/favicon.ico路径以覆盖当前的"收藏夹图标"。

                                        

                                  3、面包屑组件 Breadcrumb Component

                                                在有很多页面的网站上，面包屑导航可以极大地增强用户找到他们的方式的方式。

                                                就可用性而言，面包屑减少了网站访问者为了进入更高级别的页面而需要采取的操作数量，并且它们提高了网站部分和页面的可查找性。


                                                (1)、如何在LeptonX Lite MVC 中覆盖面包屑组件？

                                                        ①、覆盖面包屑组件的视图(.cshtml文件)：

                                                                  在 "Themes/LeptonXLite/Components/Breadcrumbs/Default.cshtml" 文件中定义，
                                                                  
                                                                  你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                        ②、覆盖面包屑组件的组件类(C#文件)：

                                                                  在 "Themes/LeptonXLite/Components/Breadcrumbs/BreadcrumbsViewComponent.cs" 文件中定义，

                                                                  你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。



                                  4、侧边栏菜单组件  Sidebar Menu Component 

                                                侧边栏菜单已被用作到服务产品的相关页面的目录，导航到特定服务或主题的项目，甚至只是用户可能感兴趣的链接。

                                                (1)、如何在 LeptonX Lite MVC 中覆盖侧边栏菜单组件?

                                                        ①、覆盖侧边栏组件的视图(.cshtml文件)：

                                                                在 "Themes/LeptonXLite/Components/Menu/Default.cshtml" 文件中定义，
                                                                
                                                                您可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                        ②、覆盖侧边栏组件类(C#):

                                                                可以覆盖 "Themes/LeptonXLite/Components/Menu/MainMenuViewComponent.cs" 文件，
                                                                
                                                                并且可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。


                                                        (     
                                                                侧边栏菜单动态呈现菜单项。
                                                                
                                                                菜单项是部分视图，定义在Themes/LeptonXLite/Components/Menu/_MenuItem.cshtml文件中，
                                                                
                                                                您可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。
                                                        )

                                                      
                                  5、页面警报组件  Page Alerts Component

                                              为典型用户操作提供上下文反馈消息，其中包含少数可用和灵活警报消息。
                                              
                                              警报适用于任何长度的文本，以及可选的关闭按钮。

                                              (1)、如何在LeptonX Lite MVC中覆盖页面警报组件

                                                       ①、覆盖警报组件的视图(.cshtml文件)：

                                                                在 "Themes/LeptonXLite/Components/PageAlerts/Default.cshtml" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                       ②、覆盖警报组件类(C#文件)：

                                                                在 "Themes/LeptonXLite/Components/PageAlerts/PageAlertsViewComponent.cs"文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。


                                  6、工具栏组件  Toolbar Component
                                  
                                            工具栏项用于向工具栏添加额外功能。工具栏是一个水平条，包含一组工具栏项。

                                            (1)、如何在LeptonX Lite MVC中覆盖工具栏组件?

                                                       ①、覆盖工具栏组件的视图(.cshtml文件)：

                                                                在 "Themes/LeptonXLite/Components/Toolbar/Default.cshtml"文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                       ②、覆盖工具栏组件的组件类(C#文件)：

                                                                在 "Themes/LeptonXLite/Components/Toolbar/ToolbarViewComponent.cs" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。


                                  7、工具栏项目组件  Toolbar Item Component

                                            工具栏项是一个单项，包含一个链接、一个图标、一个标签等。

                                            (1)、如何在LeptonX Lite MVC中覆盖工具栏项目组件

                                                       ①、覆盖工具栏项目组件的视图(.cshtml文件)：

                                                                在"Themes/LeptonXLite/Components/ToolbarItems/Default.cshtml"文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                       ②、覆盖工具栏项目的组件类(C#文件)：

                                                                在 "Themes/LeptonXLite/Components/ToolbarItems/ToolbarItemsViewComponent.cs" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。
              */


              /*
                    四、工具栏项目组件

                              1、语言切换组件

                                        想想一个多语言网站，可能会让你想到的第一件事是语言开关组件。

                                        导航栏是嵌入语言开关的好地方。通过将语言开关嵌入您网站的导航栏中，您可以让用户更轻松地找到它和轻松地切换语言，而无需尝试在整个网站上找到它。

                                        (1)、如何在LeptonX Lite MVC中覆盖语言切换组件

                                                      ①、覆盖语言切换组件的视图(.cshtml文件)：

                                                                在 "Themes/LeptonXLite/Components/LanguageSwitch/Default.cshtml" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                      ②、覆盖语言切换组件的组件类(C#文件)：

                                                                在 "Themes/LeptonXLite/Components/LanguageSwitch/LanguageSwitchViewComponent.cs" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                              2、用户菜单组件

                                         用户菜单是当您在页面右上角（工具栏中的）单击您的姓名或个人资料图片时下拉的菜单。它下拉了设置、注销等选项。
                                         
                                         (1)、如何在LeptonX Lite MVC中覆盖用户菜单组件

                                                      ①、覆盖用户菜单组件的视图(.cshtml文件)：

                                                                在 "Themes/LeptonXLite/Components/UserMenu/Default.cshtml" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。

                                                      ②、覆盖用户菜单组件的组件类(C#文件)：

                                                                在 "Themes/LeptonXLite/Components/UserMenu/UserMenuViewComponent.cs" 文件中定义，
                                                                
                                                                你可以通过在同一文件夹下创建具有相同名称和的文件来覆盖它。
              */
    </script>
  </body>
</html>